<DocumentFragment>
  <div
    class="ant-app"
  >
    <div>
      test
    </div>
    <div
      class="ant-pro-card ant-pro-statistic-card ant-pro-card-border ant-pro-card-contain-card"
    >
      <div
        class="ant-pro-card-header"
      >
        <div
          class="ant-pro-card-title"
        >
          Core Metrics
        </div>
      </div>
      <div
        class="ant-pro-card-body"
        style="padding: 0px;"
      >
        <div
          class="ant-pro-card-col"
        >
          <div
            class="ant-pro-card ant-pro-statistic-card ant-pro-card-border"
          >
            <div
              class="ant-pro-card-body"
            >
              <div
                class="ant-pro-statistic-card-content "
              >
                <div
                  class="ant-pro-card-statistic"
                >
                  <div
                    class="ant-pro-card-statistic-wrapper"
                  >
                    <div
                      class="ant-pro-card-statistic-content"
                    >
                      <div
                        class="ant-statistic ant-pro-card-statistic-layout-vertical"
                      >
                        <div
                          class="ant-statistic-title"
                        >
                          Today's UV
                          <span
                            aria-describedby="test-id"
                            aria-label="question-circle"
                            class="anticon anticon-question-circle ant-pro-card-statistic-tip"
                            role="img"
                          >
                            <svg
                              aria-hidden="true"
                              data-icon="question-circle"
                              fill="currentColor"
                              focusable="false"
                              height="1em"
                              viewBox="64 64 896 896"
                              width="1em"
                            >
                              <path
                                d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
                              />
                              <path
                                d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0130.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1080 0 40 40 0 10-80 0z"
                              />
                            </svg>
                          </span>
                        </div>
                        <div
                          class="ant-statistic-content"
                        >
                          <span
                            class="ant-statistic-content-value"
                          >
                            <span
                              class="ant-statistic-content-value-int"
                            >
                              79
                            </span>
                            <span
                              class="ant-statistic-content-value-decimal"
                            >
                              .00
                            </span>
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="ant-pro-card-divider ant-pro-card-divider-vertical"
        />
        <div
          class="ant-pro-card-col"
        >
          <div
            class="ant-pro-card ant-pro-statistic-card ant-pro-card-border"
          >
            <div
              class="ant-pro-card-body"
            >
              <div
                class="ant-pro-statistic-card-content "
              >
                <div
                  class="ant-pro-card-statistic"
                >
                  <div
                    class="ant-pro-card-statistic-wrapper"
                  >
                    <div
                      class="ant-pro-card-statistic-content"
                    >
                      <div
                        class="ant-statistic ant-pro-card-statistic-layout-vertical"
                      >
                        <div
                          class="ant-statistic-title"
                        >
                          Frozen Amount
                        </div>
                        <div
                          class="ant-statistic-content"
                        >
                          <span
                            class="ant-statistic-content-value"
                          >
                            <span
                              class="ant-statistic-content-value-int"
                            >
                              112,893
                            </span>
                            <span
                              class="ant-statistic-content-value-decimal"
                            >
                              .00
                            </span>
                          </span>
                          <span
                            class="ant-statistic-content-suffix"
                          >
                            Yuan
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="ant-pro-card-divider ant-pro-card-divider-vertical"
        />
        <div
          class="ant-pro-card-col"
        >
          <div
            class="ant-pro-card ant-pro-statistic-card ant-pro-card-border"
          >
            <div
              class="ant-pro-card-body"
            >
              <div
                class="ant-pro-statistic-card-content "
              >
                <div
                  class="ant-pro-card-statistic"
                >
                  <div
                    class="ant-pro-card-statistic-wrapper"
                  >
                    <div
                      class="ant-pro-card-statistic-content"
                    >
                      <div
                        class="ant-statistic ant-pro-card-statistic-layout-vertical"
                      >
                        <div
                          class="ant-statistic-title"
                        >
                          Information Completeness
                        </div>
                        <div
                          class="ant-statistic-content"
                        >
                          <span
                            class="ant-statistic-content-value"
                          >
                            <span
                              class="ant-statistic-content-value-int"
                            >
                              92
                            </span>
                          </span>
                          <span
                            class="ant-statistic-content-suffix"
                          >
                            / 100
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="ant-pro-card-col"
        >
          <div
            class="ant-pro-card ant-pro-statistic-card ant-pro-card-border"
          >
            <div
              class="ant-pro-card-body"
            >
              <div
                class="ant-pro-statistic-card-content "
              >
                <div
                  class="ant-pro-card-statistic"
                >
                  <div
                    class="ant-pro-card-statistic-wrapper"
                  >
                    <div
                      class="ant-pro-card-statistic-content"
                    >
                      <div
                        class="ant-statistic ant-pro-card-statistic-layout-vertical"
                      >
                        <div
                          class="ant-statistic-title"
                        >
                          Frozen Amount
                        </div>
                        <div
                          class="ant-statistic-content"
                        >
                          <span
                            class="ant-statistic-content-value"
                          >
                            <span
                              class="ant-statistic-content-value-int"
                            >
                              112,893
                            </span>
                            <span
                              class="ant-statistic-content-value-decimal"
                            >
                              .00
                            </span>
                          </span>
                          <span
                            class="ant-statistic-content-suffix"
                          >
                            Yuan
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      style="margin-top: 20px; padding: 20px; background-color: #f5f5f5; border-radius: 6px;"
    >
      <h4>
        StatisticCard.Group Props 说明：
      </h4>
      <ul>
        <li>
          <strong>
            title
          </strong>
          : 分组标题
        </li>
        <li>
          <strong>
            direction
          </strong>
          : 排列方向，'row' 表示水平排列，'column' 表示垂直排列
        </li>
        <li>
          <strong>
            children
          </strong>
          : StatisticCard 和 Divider 子组件
        </li>
      </ul>
      <h4>
        StatisticCard Statistic Props：
      </h4>
      <ul>
        <li>
          <strong>
            title
          </strong>
          : 统计项标题
        </li>
        <li>
          <strong>
            tip
          </strong>
          : 提示信息，鼠标悬停时显示
        </li>
        <li>
          <strong>
            value
          </strong>
          : 统计数值
        </li>
        <li>
          <strong>
            precision
          </strong>
          : 数值精度，控制小数位数
        </li>
        <li>
          <strong>
            suffix
          </strong>
          : 数值后缀，如单位 'Yuan'
        </li>
      </ul>
      <h4>
        Divider Props：
      </h4>
      <ul>
        <li>
          <strong>
            type
          </strong>
          : 分割线类型，'horizontal' 表示水平分割线，'vertical' 表示垂直分割线
        </li>
      </ul>
      <h4>
        响应式布局特点：
      </h4>
      <ul>
        <li>
          <strong>
            断点控制
          </strong>
          : 当容器宽度小于 596px 时切换为垂直布局
        </li>
        <li>
          <strong>
            分割线适配
          </strong>
          : 根据布局方向自动调整分割线类型
        </li>
        <li>
          <strong>
            实时监听
          </strong>
          : 使用 ResizeObserver 实时监听容器大小变化
        </li>
      </ul>
      <h4>
        数值格式化：
      </h4>
      <ul>
        <li>
          <strong>
            precision
          </strong>
          : 控制数值的小数位数，如 precision=2 显示两位小数
        </li>
        <li>
          <strong>
            suffix
          </strong>
          : 添加数值后缀，如单位、百分比等
        </li>
        <li>
          <strong>
            prefix
          </strong>
          : 添加数值前缀，如货币符号等
        </li>
      </ul>
      <h4>
        使用场景：
      </h4>
      <ul>
        <li>
          <strong>
            核心指标展示
          </strong>
          : 展示多个关键业务指标
        </li>
        <li>
          <strong>
            数据对比
          </strong>
          : 使用分割线分隔不同的统计项
        </li>
        <li>
          <strong>
            响应式设计
          </strong>
          : 在不同屏幕尺寸下保持良好的显示效果
        </li>
      </ul>
    </div>
  </div>
</DocumentFragment>